import { Button, Space, Table } from 'antd'
import { useEffect, useRef, useState } from 'react'
import TitleSearch from '../../components/TitleSearch'
import api from '../../api'
import CarouseIPageAction from './CarouseIPageAction'


const columns = [
    {
        title: '编号',
        dataIndex: '_id',
        align: 'center',
    },
    {
        title: '商品id',
        dataIndex: 'goods_id',
        align: 'center',
    },
    {
        title: '图片',
        dataIndex: 'image_src',
        align: 'center',
        render: text => <img src={text} alt="" style={{ width: '100px', height: '100px' }} />,
    },
    {
        title: '导航地址',
        dataIndex: 'navigator_url',
        align: 'center',
    },
    {
        title: '打开方式',
        dataIndex: 'open_type',
        align: 'center',
    },
    {
        title: '操作',
        align: 'center',
        render: () => (
            <Space>
                <Button type="primary">修改</Button>
                <Button type="primary" danger>删除</Button>
            </Space>
        )
    }
]


const CarouselPage = () => {

    const [data, setData] = useState([])
    const actionRef = useRef(null)



    useEffect(() => {
        getData()
    }, [])
    const getData = async () => {
        const res = await api.admin.getAlladmins()
        if (res.meta.status) {
            setData(res.message)
        }
    }
    const onOk = () => actionRef.current.showModal()

    return (
        <div>
            <TitleSearch title='轮播图管理' onOk={onOk} />
            <Table
                bordered
                dataSource={data}
                columns={columns}
                rowKey='_id'
            />
            <CarouseIPageAction ref={actionRef} />
        </div>
    )
}

export default CarouselPage